<template>
  <!--人员类型管理-->
  <page-list :pageOption="pageOption">
    <template #tips>
      <span class="table-tips">班组人员类型编码必须以 "B_" 开头; 管理人员类型必须以 "G_" 开头； 中层人员类型必须以"Z_" 开头</span>
    </template>
  </page-list>
</template>

<script setup>
  import PageList from '../../../components/pageList/index.vue';

  const pageOption = {
    dataUrl: '/base/personType',
    method: 'get',
    searchForm: [
      {
        field: 'personTypeName',
        label: '类型名称',
        component: 'Input',
        colProps: { span: 8 },
      },
      {
        field: 'personTypeCode',
        label: '类型编码',
        component: 'Input',
        colProps: { span: 8 },
      },
    ],
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        width: 80,
        ifShow: false,
      },
      {
        title: '人员类型名称',
        dataIndex: 'personTypeName',
        width: 180,
        align: 'center',
      },
      {
        title: '人员类型编码',
        dataIndex: 'personTypeCode',
        width: 180,
        align: 'center',
      },
      {
        title: '创建人',
        dataIndex: 'sysCreatorName',
        align: 'center',
        width: 120,
      },
      {
        title: '创建日期',
        dataIndex: 'sysCreateDate',
        align: 'center',
        width: 160,
      },
      {
        title: '排序',
        dataIndex: 'displayOrder',
        align: 'center',
        width: 90,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
        width: 150,
      },
    ],
    //新增编辑弹窗表单
    modalForm: [
      {
        field: 'id',
        label: 'id',
        component: 'Input',
        show: false,
      },
      {
        field: 'personTypeName',
        label: '人员类型名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'personTypeCode',
        label: '人员类型编码',
        component: 'Input',
        required: true,
        dynamicDisabled: ({ values }) => {
          return !!values.id;
        },
      },
      {
        field: 'displayOrder',
        label: '排序',
        component: 'InputNumber',
      },
      {
        field: 'remark',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 5,
        },
        dynamicRules: () => {
          return [
            {
              validator: (_, value) => {
                if (null != value && value.length && value.length > 500) {
                  return Promise.reject('备注字数不能超过500');
                }
                return Promise.resolve();
              },
            },
          ];
        },
      },
    ],
  };
</script>

<style scoped></style>
